﻿<!DOCTYPE html>
<html ng-app="demoApp" lang="en">
<head>
    <meta name="keywords" content="AngularJS Menu, Main Menu, Context Menu, Vertical Menu, Popup Menu, Menu, jqxMenu" />
    <meta name="description" content="AngularJS Menu example. This example demonstrates a Menu with Images." /> 
    <title id='Description'>In this demo is illustrated how to add images to the AngularJS Menu items.
    </title>
    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../../scripts/angular.min.js"></script> 
    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {

        });
    </script>
</head>
<body ng-controller="demoController">
    <jqx-menu jqx-width="'150px'" jqx-height="'220px'" jqx-mode="'vertical'">
        <ul>
            <li>
                <img style='float: left; margin-right: 5px;' src='../../../images/mailIcon.png' /><span>Mail</span>
            </li>
            <li>
                <img style='float: left; margin-right: 5px;' src='../../../images/calendarIcon.png' /><span>Calendar</span>
            </li>
            <li>
                <img style='float: left; margin-right: 5px;' src='../../../images/contactsIcon.png' /><span>Contacts</span>
            </li>
            <li>
                <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>
                    <span>Inbox</span></span>
                <ul>
                    <li>
                        <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>jqwidgets</span>
                        <ul>
                            <li>
                                <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>Admin</span>
                            </li>
                            <li>
                                <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>Corporate</span>
                            </li>
                            <li>
                                <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>Finance</span>
                            </li>
                            <li>
                                <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>Other</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>Personal</span>
                    </li>
                </ul>
            </li>
            <li>
                <img style='float: left; margin-right: 5px;' src='../../../images/recycle.png' />
                <span>Deleted Items</span>
                <ul>
                    <li>
                        <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>Today</span>
                    </li>
                    <li>
                        <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>Last
                            Week</span> </li>
                    <li>
                        <img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>Last
                            Month</span> </li>
                </ul>
            </li>
            <li>
                <img style='float: left; margin-right: 5px;' src='../../../images/settings.png' /><span>Settings</span>
                <ul style="width: 230px;">
                    <li>
                        Enable Auto-Save</li>
                    <li>
                        Send email as anonymous</li>
                    <li>
                        Save sent emails</li>
                </ul>
            </li>
            <li>
                <img style='float: left; margin-right: 5px;' src='../../../images/notesIcon.png' /><span>Notes</span>
            </li>
            <li>
                <img style='float: left; margin-right: 5px;' src='../../../images/favorites.png' /><span>Favorites</span>
            </li>
        </ul>
    </jqx-menu>
</body>
</html>
